<script>

import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";

export default {
  components: {KtIcon},
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    toSave(titleLevel) {
      this.$emit("toSave", titleLevel);
    },
  }
}
</script>

<template>
  <div class="card">
    <div class="card-header">
      <div class="card-header-title">工作系列：{{item.name}}</div>
      <el-button
          size="small"
          class="card-header-btn"
          @click="toSave({seriesId:item.id})"
      >
        <kt-icon icon="el-icon-plus"></kt-icon>
      </el-button>
    </div>
    <div class="card-body">
      <div class="card-body-content">
        <el-scrollbar style="height: 300px;width: 100%">
          <el-row>
            <el-col
                v-for="titleLevel in item.titleLevels"
                :span="8">
              <el-popover
                  placement="bottom"
                  :title="titleLevel.name"
                  :width="200"
                  trigger="hover">
                <template #reference>
                  <div class="card-body-content-item">
                    <div>
                      <img class="card-body-content-item-img"
                           :src="$kt.file.visit(titleLevel.fileIdOfIcon)" alt="">
                    </div>
                    <div class="card-body-content-item-title">{{titleLevel.name}}</div>
                  </div>
                </template>
                <template #default>
                  <div>
                    <div style="font-size: 12px">
                      <div>职称等级：{{ titleLevel.name }}</div>
                      <div style="height: 5px"></div>
                      <div>对应工作系列：{{ item.name }}</div>
                    </div>
                    <div style="height: 10px"></div>
                    <div style="text-align: right">
                      <el-button
                          size="small"
                          type="primary"
                          @click="toSave(titleLevel)"
                          style="margin-right: 5px">
                        <kt-icon icon="el-icon-edit"></kt-icon>
                      </el-button>
                      <el-button
                          size="small"
                          @click="toRemove(titleLevel)"
                          type="danger">
                        <kt-icon
                            color="#fff"
                            icon="el-icon-delete"></kt-icon>
                      </el-button>
                    </div>
                  </div>
                </template>

              </el-popover>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.card {
  text-align: left;
  background-color: #FFFFFF;
  padding: 10px;
  display: inline-block;
  margin: 10px;
  box-sizing: border-box;
  width: 300px;
  border-radius: 10px;
  border: 1px solid #e8e8e8;

  .card-header {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;

    .card-header-title {
      font-size: 14px;
      font-weight: bold;
    }

    .card-header-btn {
      position: absolute;
      right: 10px;
      top: 5px;
    }
  }

  .card-body {

    padding: 10px;
    box-sizing: border-box;

    .card-body-content {

      .card-body-content-item {
        display: inline-block;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;

        .card-body-content-item-img {
          width: 50px;
          height: 50px;
          border-radius: 10px;
        }

        .card-body-content-item-title {
          font-size: 14px;
          color: #000000;
          font-weight: bold;
        }
      }

      .card-body-content-item:hover {
        transform: scale(.95);
      }
    }
  }
}
</style>